<!--
  会诊统计
  lzx
  2020年1月13日
-->
<template lang="pug">
  el-container
    el-header.header
      title-bg(moduleTitle="在线论坛")
    el-container
      el-aside.nav-layout(width="258px")
        nav-menu
      el-main
        div.main-content-div.boxSon
          p.main-content-p 会诊统计
          div(v-if="this.identity[0].identity === '管理专家'")
            el-select(v-model="sectionData" placeholder="请选择原切片单位" @change="consultationDataBus")
              el-option(
              v-for="(item, index) in sectionList"
              :key="index"
              :label="item.hospitalName"
              :value="item.hospitalId")
            el-select(v-model="physicianData" placeholder="请选择申请医师" @change="consultationDataBus")
              el-option(
              v-for="(item, index) in physicianList"
              :key="index"
              :label="item.name"
              :value="item.id")
            el-select(v-model="hospitalData" placeholder="请选择会诊医院" @change="consultationDataBus")
              el-option(
              v-for="(item, index) in hospitalList"
              :key="index"
              :label="item.hospitalName"
              :value="item.hospitalId")
            el-select(v-model="specialistData" placeholder="请选择会诊专家" @change="consultationDataBus")
              el-option(
              v-for="(item, index) in specialistList"
              :key="index"
              :label="item.name"
              :value="item.id")
          div(v-if="this.identity[0].identity === '专家'")
            el-select(v-model="sectionData" placeholder="请选择原切片单位" @change="consultationDataSpe")
              el-option(
              v-for="(item, index) in sectionList"
              :key="index"
              :label="item.hospitalName"
              :value="item.hospitalId")
            el-select(v-model="physicianData" placeholder="请选择申请医师" @change="consultationDataSpe")
              el-option(
              v-for="(item, index) in physicianList"
              :key="index"
              :label="item.name"
              :value="item.id")
          div(v-if="this.identity[0].identity === '医生'")
            el-select(v-model="hospitalData" placeholder="请选择会诊医院" @change="consultationDataDoc")
              el-option(
              v-for="(item, index) in hospitalList"
              :key="index"
              :label="item.hospitalName"
              :value="item.hospitalId")
            el-select(v-model="specialistData" placeholder="请选择会诊专家" @change="consultationDataDoc")
              el-option(
              v-for="(item, index) in specialistList"
              :key="index"
              :label="item.name"
              :value="item.id")
          div.btn(v-if="this.identity[0].identity === '管理专家'" @click="consultationDataBus") 查询
          div.btn(v-if="this.identity[0].identity === '专家'" @click="consultationDataSpe") 查询
          div.btn(v-if="this.identity[0].identity === '医生'" @click="consultationDataDoc") 查询
          div.btn(@click="reset" v-if="this.identity[0].identity === '管理专家'") 重置
          div.btn(@click="resetSpe" v-if="this.identity[0].identity === '专家'") 重置
          div.btn(@click="resetDoc" v-if="this.identity[0].identity === '医生'") 重置
        div.main-content-box
          el-row(:gutter="28")
            el-col.marTop12(:span="16")
              el-card.form-box
                div(slot="header").card-title 会诊次数统计
                div(ref="form")
                  el-table(:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" stripe style="width: 100%" :height="tableHeight" highlight-current-row)
                    el-table-column(type="index" label="序号")
                    el-table-column(prop="doctor" label="申请医师" v-if="this.identity[0].identity === '专家'")
                    el-table-column(prop="doctorHospital" label="原切片单位" v-if="this.identity[0].identity === '专家'")
                    el-table-column(prop="expert" label="会诊专家" v-if="this.identity[0].identity === '医生'")
                    el-table-column(prop="expertHospital" label="会诊医院" v-if="this.identity[0].identity === '医生'")
                    el-table-column(prop="doctor" label="申请医师" v-if="this.identity[0].identity === '管理专家'")
                    el-table-column(prop="doctorHospital" label="原切片单位" v-if="this.identity[0].identity === '管理专家'")
                    el-table-column(prop="expert" label="会诊专家" v-if="this.identity[0].identity === '管理专家'")
                    el-table-column(prop="expertHospital" label="会诊医院" v-if="this.identity[0].identity === '管理专家'")
                    el-table-column(prop="formNum" label="组织病理" )
                    el-table-column(prop="cellNum" label="细胞病理" )
                    el-table-column(prop="orgnum" label="会诊总次数" )
                  div.paging
                    el-pagination(
                    @current-change="current_change"
                    layout="prev, pager, next"
                    :total="total")
            el-col.marTop12(:span="8")
              div.section
                div.sectionSon 切片类型统计
                div(name="ech0" ref="ech0").bar
              div.yearreoup
                div.yearreoupSon 年度会诊次数统计
                  el-select(v-model="presentDate" placeholder="请选择年份" @change="xianChart")
                    el-option(
                    v-for="item in datas"
                    :key="item"
                    :label="item"
                    :value="item")
                div(name="ech1" ref="ech1").line
</template>

<script>
  import TitleBg from '../../components/TitleBg'
  import NavMenu from '../../components/NavMenu'

  export default {
    name: 'statistics',
    components: {
      TitleBg,
      NavMenu
    },
    data() {
      return {
        value: '',
        fullHeight: document.documentElement.clientHeight, // 屏幕可视区域高度
        tableHeight: null, // 表格高度——随屏幕高度实时变化
        options: [],
        total: 100, // 默认数据总数
        pagesize: 10, // 每页的数据条数
        currentPage: 1, // 默认开始页面
        tableData: [], // 会诊统计表格数据
        datas: [], // 年度会诊统计年份
        identity: null,
        bing: [], // 饼图数据
        bingName: [], // 饼图病理名
        xian: [], // 线图数据
        xianName: [], // 线图病理名
        presentDate: '', // 年份数据绑定
        sectionData: '', // 原切片单位
        sectionList: '', // 原切片单位列表
        physicianData: '', // 请选择申请医师
        physicianList: '', // 请选择申请医师列表
        hospitalData: '', // 请选择会诊医院
        hospitalList: '', // 请选择会诊医院列表
        specialistData: '', // 请选择会诊专家
        specialistList: '', // 请选择会诊专家列表
        xianUrl: '', // 线图获取
        bingUrl: '', // 饼图获取
        xianYear: '', // 线图年份获取
        paging: '' // 分页总数
      }
    },
    created() {
      // 身份判断
      this.identity = JSON.parse(this.$KalixCatch.get('personaltwo'))
    },
    beforeMount() {
      if (this.identity[0].identity === '管理专家') {
        this.sectionData = 0
        this.hospitalData = 0
        this.consultationDataBus()
        this.sectionData = ''
        this.physicianData = ''
        this.hospitalData = ''
        this.specialistData = ''
      } else if (this.identity[0].identity === '医生') {
        this.sectionData = 0
        this.hospitalData = 0
        this.consultationDataDoc() // 医生角色表格数据获取
        this.sectionData = ''
        this.physicianData = ''
        this.hospitalData = ''
        this.specialistData = ''
        console.log('医生+++++++++++++++++++++++++++++++++++++++')
      } else if (this.identity[0].identity === '专家') {
        this.sectionData = 0
        this.hospitalData = 0
        this.consultationDataSpe() // 专家角色表格数据获取
        this.sectionData = ''
        this.physicianData = ''
        this.hospitalData = ''
        this.specialistData = ''
        console.log('专家+++++++++++++++++++++++++++++++++++++++')
      }
        this.seleFindAllDoctor() // 医生select获取
        this.seleFindAllDoctorHosp() // 医生医院select获取
        this.seleFindAllExpert() // 专家select获取
        this.seleFindAllExpertHosp() // 专家医院select获取
    },
    mounted() {
      const that = this
      // 窗口变化重新计算高度
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight
          that.fullHeight = window.fullHeight
          that.$nextTick(() => {
            that.tableHeight = that.fullHeight - 278 - 80 // 患者列表表格高度
            that.$refs.form.style.height = that.fullHeight - 278 - 50 + 'px' // 患者详情表单高度
          })
        })()
      }
      this.$nextTick(() => {
        that.tableHeight = that.fullHeight - 278 - 80 // 患者列表表格高度
        console.log('--------------', that.$refs.form)
        that.$refs.form.style.height = that.fullHeight - 278 - 50 + 'px'// 患者详情表单高度
      })
      let myChart1 = this.$echarts.init(this.$refs.ech0)
      let myChart2 = this.$echarts.init(this.$refs.ech1)
      window.onresize = function () {
        myChart1.resize()
        myChart2.resize()
      }
      let time = new Date()
      this.presentDate = time.getFullYear()
      this.bingChart() // 切片类型统计饼图
      this.xianChart() // 年度统计折线图
      this.xianYearFun() // 年度统计折线图年份
    },
    methods: {
      seleFindAllDoctorHosp() { // 医生医院select获取
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/doctorCensus/getDoctorHospital'
        }).then((res) => {
          this.sectionList = res.data.data
        })
      },
      seleFindAllExpertHosp() { // 医生身份查专家医院select获取
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/doctorCensus/getExpertHospital'
        }).then((res) => {
          this.hospitalList = res.data.data
        })
      },
      seleFindAllDoctor() { // 专家查医生select获取
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/doctorCensus/findAllDoctor'
        }).then((res) => {
          this.physicianList = res.data.data
        })
      },
      seleFindAllExpert() { // 医生查专家select获取
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/doctorCensus/findAllExpert'
        }).then((res) => {
          this.specialistList = res.data.data
        })
      },
      xianYearFun() { // 线图年份获取方法
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/doctorCensus/getYear',
          params: {
            id: this.identity[0].id,
            identity: this.identity[0].identity
          }
        }).then((res) => {
          console.log('res333333333333333', res)
          this.datas = res.data.data
        })
      },
      bingChart() { // 饼图数据获取
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/doctorCensus/getSectionType',
          params: {
            id: this.identity[0].id,
            identity: this.identity[0].identity
          }
        }).then((res) => {
          this.bing = res.data.data
          this.bing.forEach((res) => {
            this.bingName.push(res.name)
          })
          this.cakeEcharts() // 饼图
        })
      },
      xianChart() { // 线图数据获取
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/doctorCensus/yearStatistics',
          params: {
            year: this.presentDate,
            id: this.identity[0].id,
            identity: this.identity[0].identity
          }
        }).then((res) => {
          this.xian = []
          res.data.data.forEach((data) => {
            this.xianName.push(data.pathology)
            this.xian.push({name: data.pathology, type: 'line', stack: '总量', data: data.value})
          })
          this.yearStat() // 折线图
        })
      },
      reset() { // 重置管理专家
        this.sectionData = ''
        this.physicianData = ''
        this.hospitalData = ''
        this.specialistData = ''
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/doctorCensus/getTable',
          params: {
            expertId: 0,
            expertHospitalId: 0,
            doctorId: 0,
            doctorHospitalId: 0,
            num: 1
          }
        }).then((res) => {
          this.tableData = []
          res.data.data.forEach(res => {
            this.tableData.push({
              doctor: res.doctor,
              doctorHospital: res.doctorHospital,
              expert: res.expert,
              expertHospital: res.expertHospital,
              formNum: res.formNum,
              cellNum: res.cellNum,
              orgnum: res.formNum + res.cellNum
            })
          })
        })
      },
      resetDoc() { // 重置医生
        this.sectionData = ''
        this.physicianData = ''
        this.hospitalData = ''
        this.specialistData = ''
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/doctorCensus/getDoctorTable',
          params: {
            id: this.identity[0].id,
            expertId: 0,
            expertHospitalId: 0,
            num: 1
          }
        }).then((res) => {
          this.tableData = []
          res.data.data.forEach(res => {
            this.tableData.push({
              expert: res.expert,
              expertHospital: res.expertHospital,
              formNum: res.formNum,
              cellNum: res.cellNum,
              orgnum: res.formNum + res.cellNum
            })
          })
          this.total = this.paging = res.data.totalCount * 10
        })
      },
      resetSpe() { // 重置专家
        this.sectionData = ''
        this.physicianData = ''
        this.hospitalData = ''
        this.specialistData = ''
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/doctorCensus/getExpertTable',
          params: {
            id: this.identity[0].id,
            doctorId: 0,
            doctorHospitalId: 0,
            num: 1
          }
        }).then((res) => {
          this.tableData = []
          res.data.data.forEach(res => {
            this.tableData.push({
              doctor: res.doctor,
              doctorHospital: res.doctorHospital,
              formNum: res.formNum,
              cellNum: res.cellNum,
              orgnum: res.formNum + res.cellNum
            })
          })
          this.total = this.paging = res.data.totalCount * 10
        })
      },
      consultationDataBus() { // 业务专家身份表格数据获取
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/doctorCensus/getTable',
          params: {
            expertId: this.specialistData === '' ? 0 : this.specialistData,
            expertHospitalId: this.hospitalData === '' ? 0 : this.hospitalData,
            doctorId: this.physicianData === '' ? 0 : this.physicianData,
            doctorHospitalId: this.sectionData === '' ? 0 : this.sectionData,
            num: this.currentPage
          }
        }).then((res) => {
          this.tableData = []
          res.data.data.forEach(res => {
            this.tableData.push({
              doctor: res.doctor,
              doctorHospital: res.doctorHospital,
              expert: res.expert,
              expertHospital: res.expertHospital,
              formNum: res.formNum,
              cellNum: res.cellNum,
              orgnum: res.formNum + res.cellNum
            })
          })
          this.total = this.paging = res.data.totalCount * 10
        })
      },
      consultationDataDoc() { // 医生身份表格数据获取
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/doctorCensus/getDoctorTable',
          params: {
            id: this.identity[0].id,
            expertId: this.specialistData === '' ? 0 : this.specialistData,
            expertHospitalId: this.hospitalData === '' ? 0 : this.hospitalData,
            num: this.currentPage
          }
        }).then((res) => {
          this.tableData = []
          res.data.data.forEach(res => {
            this.tableData.push({
              expert: res.expert,
              expertHospital: res.expertHospital,
              formNum: res.formNum,
              cellNum: res.cellNum,
              orgnum: res.formNum + res.cellNum
            })
          })
          this.total = this.paging = res.data.totalCount * 10
        })
      },
      consultationDataSpe() { // 专家身份表格数据获取
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/doctorCensus/getExpertTable',
          params: {
            id: this.identity[0].id,
            doctorId: this.physicianData === '' ? 0 : this.physicianData,
            doctorHospitalId: this.sectionData === '' ? 0 : this.sectionData,
            num: this.currentPage
          }
        }).then((res) => {
          this.tableData = []
          if (this.tableData) {
            res.data.data.forEach(res => {
              this.tableData.push({
                doctor: res.doctor,
                doctorHospital: res.doctorHospital,
                formNum: res.formNum,
                cellNum: res.cellNum,
                orgnum: res.formNum + res.cellNum
              })
            })
            this.total = this.paging = res.data.totalCount * 10
          }
        })
      },
      cakeEcharts() { // 饼图
        let myChart = this.$echarts.init(this.$refs.ech0)
        // 绘制图表
        myChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            show: true,
            width: '300px',
            orient: 'horizontal',
            bottom: '10%',
            selectedMode: false,
            data: this.bingName
            // data: ['细胞病理', '组织病理']
          },
          grid: {
            top: 50,
            bottom: 50
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['30%', '60%'],
              labelLine: false,
              center: ['50%', '40%'],
              data: this.bing,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      },
      yearStat() { // 折线图
        let myChart = this.$echarts.init(this.$refs.ech1)
        myChart.setOption({
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: this.xianName,
            top: '5%',
            selectedMode: false
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true
          },
          color: ['#237EF3', '#4ECD52'],
          yAxis: {
            type: 'value',
            splitLine: {
              show: true
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            splitLine: {
              show: true
            }
          },
          series: this.xian
        })
      },
      handleClick(row) {
        console.log(row)
      },
      current_change: function (currentPage) {
        this.currentPage = currentPage
        if (this.identity[0].identity === '管理专家') {
          this.sectionData = 0
          this.hospitalData = 0
          this.consultationDataBus()
          this.sectionData = ''
          this.physicianData = ''
          this.hospitalData = ''
          this.specialistData = ''
        } else if (this.identity[0].identity === '医生') {
          this.sectionData = 0
          this.hospitalData = 0
          this.consultationDataDoc() // 医生角色表格数据获取
          this.sectionData = ''
          this.physicianData = ''
          this.hospitalData = ''
          this.specialistData = ''
        } else if (this.identity[0].identity === '专家') {
          this.sectionData = 0
          this.hospitalData = 0
          this.consultationDataSpe() // 专家角色表格数据获取
          this.sectionData = ''
          this.physicianData = ''
          this.hospitalData = ''
          this.specialistData = ''
        }
      }
    }
  }
</script>

<style scoped lang="stylus">
  .statisticsBox
    width 100%
    height 100%

  .boxFar
    width 100%
    height 100%

  .boxCenLeft
    width 258px
    height 94%
    position relative
    float left
    margin-right 28px

  .boxCenter
    margin-top 12px
    width 84%
    height 90%
    float left
    vertical-align top
    position relative

  .btn
    display inline-block
    width 66px
    height 42px
    line-height 42px
    text-align center
    background-color #0F5ABC
    border 1px solid #fff
    vertical-align top
    margin-left 20px
    color #fff
    cursor pointer
    -o-user-select none /*文字禁止被选中*/
    -moz-user-select none /*火狐 firefox*/
    -webkit-user-select none /*webkit浏览器*/
    -ms-user-select none /*IE10+*/
    -khtml-user-select none /*早期的浏览器*/
    user-select none
    border-radius 5px
    box-sizing border-box

  .boxSon
    p
      color #fff
      font-size 20px
      margin-top 20px
      margin-bottom 20px
    div
      display inline-block

  .tableBox
    width 100%
    height 83%
    border-radius 5px

  .printText
    width 100%
    height 66px
    line-height 66px
    border-bottom 1px solid #EFF0F0
    padding-left 20px
    letter-spacing 2px
    margin-bottom 24px

  .boxCenLef
    float left
    width 65.3%
    height 100%
    background-color: #fff
    vertical-align top
    padding-left 10px
    padding-right 10px
    box-sizing border-box
    position relative
    border-radius 5px

  .boxCenRig
    float right
    width 32%
    height 100%
    border-radius 5px

  .section
    width 100%
    height 48%
    background-color #fff
    border-radius 5px
    margin-bottom 28px
    -webkit-box-shadow 0 2px 12px 0 rgba(0, 0, 0, .1)
    box-shadow 0 2px 12px 0 rgba(0, 0, 0, .1)

  .sectionSon
    height 66px
    line-height 66px
    border-bottom 1px solid #EFF0F0
    letter-spacing 2px
    padding-left 20px
    box-sizing border-box

  .yearreoup
    width 100%
    border-radius 5px
    background-color #fff
    -webkit-box-shadow 0 2px 12px 0 rgba(0, 0, 0, .1)
    box-shadow 0 2px 12px 0 rgba(0, 0, 0, .1)
    margin-bottom 10px

  .yearreoupSon
    height 66px
    line-height 66px
    border-bottom 1px solid #EFF0F0
    letter-spacing 2px
    padding-left 20px
    box-sizing border-box
    background-color #fff

  .paging
    position absolute
    left 50%
    bottom 10px
    transform translateX(-50%)

  .bar
    width 100%
    height 250px
    display inline-block
    padding 10px

  .line
    width 92%
    display inline-block
    height 250px
    margin 0 auto
    padding 10px

  .main-content-box
    margin-top 20px

  .form-box
    position relative

  .marTop12
    margin-top 12px
    margin-bottom 50px
</style>

<style lang="stylus">
  .boxSon .el-input__inner
    background-color rgba(0, 0, 0, 0.1)
    border none
    width 217px
    height 42px
    vertical-align middle
    color #fff

  .boxSon .el-select
    background-color rgba(0, 0, 0, 0.1)
    margin-right 20px
    color #fff

  .tableBox .check
    display inline-block
    width 60px
    height 34px
    color #6BBBF9
    border 1px solid #6BBBF9
    text-align center

  .yearreoupSon .el-select
    float right
    margin-right 30px

  .nav-layout
    position relative
    height 100%

</style>
